<template>
  <div class="addlock">
    <p class="title">添加区域集合</p>
    <section>
      <div class="lock_name">
        <span class="star">*</span>
         <p>区域集合名称</p>
           <el-input v-model="region" placeholder="请输入区域集合名称"></el-input>
      </div>
      <div class="gather">
        <p>已定义区域集合</p>
        <div class="content">
              <div>
                <span>搜索选定</span>
                <el-select v-model="select1" @change='change1(select1)' placeholder="请选择区域" >
                    <el-option
                      v-for="item in options1"
                      :key="item.id"
                      :label="item.region_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                <span>列表选定</span>
              </div>
              <div class="select1">
                <span>已选择</span>
               <section class="box">
                 <aside v-for="item in addto1">
                   <el-checkbox-group v-model="check1" >
                    <el-checkbox
                                       :label="item.region_name"
                                       :key="item.id"
                                       :value="item.id"
                                       >
                         </el-checkbox>
                    </el-checkbox-group>

                   <div class="text">
                    <ul v-for="i in item.array.data">
                     	<li>{{i.lockalias}}</li>
                     </ul>
                   </div>
                 </aside>
               </section>
                 </div>
        </div>
      </div>
      <div class="gather">
        <p>单个门锁</p>
        <div class="content">
              <div>
                <span>搜索选定</span>
                <el-select v-model="select2" placeholder="请选择门锁" @change='change2(select2)'>
                    <el-option
                      v-for="item in options2"
                      :key="item.id"
                      :label="item.lockname"
                      :value="item.id">
                    </el-option>
                  </el-select>
                <span>列表选定</span>
              </div>
              <div class="select1">
                <span>已选择</span>
                <section class="box">
                  <aside v-for="item in addto2">
                    <el-checkbox-group v-model="check2" >
                     <el-checkbox
                                        :label="item.lockname"
                                        :key="item.id"
                                        :value="item.id"
                                        >
                          </el-checkbox>
                     </el-checkbox-group>
                  </aside>
                </section>
               </div>
        </div>
      </div>
      <div class="btn" >
        <span @click='addlock()'>提交</span>
        <span @click='cancle()'>取消</span>
        </div>
    </section>
  </div>
</template>

<script>
import {region_list,lock_list,add_region} from '../js/getApi.js';
  export default{
    name:'ke_info',
    props:['isshow'],
    components:{},
    data(){
      return{
         region:'',
         check1:[],
         check2:[],
         addto1:[],
         addto2:[],
         options1:[],
         select1:'',
         options2:[],
         select2:''
      }
    },
    methods:{
      cancle(){
        this.isshow.content=true;
        this.isshow.add=false;
      },
     async addlock(){

        let lockid='';
        this.addto1.forEach((item)=>{
          this.check1.forEach((c)=>{
            if(item.region_name==c){
              item.array.data.forEach(id=>{
                 lockid+=id.id+',';
              })
            }
          })
        })
        this.addto2.forEach(item=>{
          this.check2.forEach(c=>{
            console.log(item.id)
            if(item.lockname==c){
              lockid+=item.id+',';
            }
          })
        })
       console.log(lockid)
        const data=await add_region(this.$store.state.token,this.region,lockid);
         alert(data.msg);
        if(data.code==1){
          this.isshow.content=true;
          this.isshow.add=false;
          this.$parent.getlist();
        }
      },
       change1(id){
         this.options1.forEach((item)=>{

            if(id==item.id){
               this.addto1.push({
                 region_name:item.region_name,
                 id:item.id,
                 array:item.lock_data
               })
            }
         })
       },
       change2(id){
         this.options2.forEach((item)=>{
            if(id==item.id){
               this.addto2.push({
                 lockname:item.lockname,
                 id:item.lock_id
               })
            }
         })
       }
    },
    async created() {
        const data1=await region_list(this.$store.state.token,'',1,100);
        const data2=await lock_list(this.$store.state.token,'',1,100);

        this.options1=data1;
        this.options2=data2.list;
     }
  }

</script>

<style scoped>

.title{
  color: rgba(153, 153, 153, 100);
  font-size: 16px;
  margin-top: 30px;
}
.addlock>section{
     margin-left:10px;
     margin-top: 30px;
}
.lock_name{
  display: flex;
  align-items:center;
}
.lock_name p{
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  margin-left: 10px;
}

 .el-input{
  width: 222px;
  margin-left: 10px;
}

.gather{
  margin-top:31px;
}
.gather p{
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
}
.content{
  width: 440px;
  margin-top: 7px;
  padding: 16px;
  border-radius: 10px;
  background-color: rgba(240, 240, 240, 100);
  border: 1px solid rgba(255, 255, 255, 100);
}
.content span:nth-of-type(1){
   color: rgba(16, 16, 16, 100);
   font-size: 14px;
}
.content span:nth-of-type(2){
  display: inline-block;
   width: 90px;
   height:40px;
   line-height:40px;
   border-radius: 2px;
   background-color: rgba(26, 188, 156, 100);
   color: rgba(255, 255, 255, 100);
   font-size: 12px;
   text-align: center;
   font-family: Roboto;
   cursor: pointer;
   margin-left: 12px;
}

.select1{
  margin-top:21px;
  display: flex;
}
.select1 .box{
  display:flex;
  flex-wrap: wrap;
  width: 380px;
}
.select1 aside{
  margin-right:20px;
  margin-bottom:20px;
}
.select1 span{
  margin-right: 4px;
}


.text ul{
  margin-right:10px;
}
.text ul li{
  color: rgba(145, 143, 143, 100);
  font-size: 12px;
  margin-top:10px;
}


.lock_name span.star{
  color:#E51C23;
}
 .btn{
    margin-left: 100px;
    margin-top: 100px;
    }
    .btn span{
      display:inline-block;
      cursor: pointer;
    }
 .btn span:nth-of-type(1){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(26, 188, 156, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
  }
  .btn span:nth-of-type(2){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(26, 188, 156, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(26, 188, 156, 100);
      margin-left: 20px;
     }







</style>
